<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品页面</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">

    <div class="row">
        <!--热度榜-->
        <div class="col-lg-4">
            <div class="row">
                <p1 style="font-size: 40px; margin-left: 250px; margin-bottom: 20px;color: crimson">热度榜</p1>
            </div>
            <div class="row" th:each="pro: ${hotList}" style=" margin-top:20px; border: 3px solid #ffe9bf">
                <div class="col-lg-6">
                    <img style="width: 100px;height: 100px;" th:src="${pro.contact.picUrl}"/>
                </div>
                <div class="col-lg-6">
                    <div class="row">
                        <text><strong>id:</strong></text>
                        <text th:text="${pro.contact.id}"></text>
                        <text><strong>brand:</strong></text>
                        <text th:text="${pro.contact.brandName}"></text>
                    </div>
                    <div class="row" style="margin-top: 50px">
                        <text th:text="${pro.contact.itemName}"></text>
                        <a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',1);'" href=""><img
                                src="../icon/浏览.png" style="width: 20px;height: 20px;"></a>
                        <a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',2);'" href=""><img
                                src="../icon/收藏.png" style="width: 20px;height: 20px;"></a>
                        <a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',3);'" href=""><img
                                src="../icon/购买.png" style="width: 20px;height: 20px;"></a>
                    </div>
                </div>
            </div>

        </div>
        <!--协同过滤-->
        <div class="col-lg-4">
            <div class="row">
                <p1 style="font-size: 40px; margin-left: 250px; margin-bottom: 20px;color: crimson">协同过滤推荐</p1>
            </div>
            <div class="row" th:each="pro: ${itemCfCoeffList}" style=" margin-top:20px; border: 3px solid #ffb6c7">
                <div class="col-lg-6">
                    <img style="width: 100px;height: 100px;" th:src="${pro.contact.picUrl}"/>
                </div>
                <div class="col-lg-6">
                    <div class="row">
                        <text><strong>id:</strong></text>
                        <text th:text="${pro.contact.id}"></text>
                        <text><strong>brand:</strong></text>
                        <text th:text="${pro.contact.brandName}"></text>
                    </div>
                    <div class="row" style="margin-top: 50px">
                        <text th:text="${pro.contact.itemName}"></text>
                        <a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',1);'" href=""><img src="../icon/浏览.png" style="width: 20px;height: 20px;" ></a>
                        <a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',2);'" href=""><img src="../icon/收藏.png" style="width: 20px;height: 20px;" ></a>
                        <a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',3);'" href=""><img src="../icon/购买.png" style="width: 20px;height: 20px;" ></a>
                    </div>
                </div>
            </div>
        </div>
        <!--产品画像-->
        <div class="col-lg-4">
            <div class="row">
                <p1 style="font-size: 40px; margin-left: 250px; margin-bottom: 20px;color: crimson">产品画像推荐</p1>
            </div>
            <div class="row" th:each="pro: ${productCoeffList}" style=" margin-top:20px; border: 3px solid #a1fff3">
                <div class="col-lg-6">
                    <img style="width: 100px;height: 100px;" th:src="${pro.contact.picUrl}"/>
                </div>
                <div class="col-lg-6">
                    <div class="row">
                        <text><strong>id:</strong></text>
                        <text th:text="${pro.contact.id}"></text>
                        <text><strong>brand:</strong></text>
                        <text th:text="${pro.contact.brandName}"></text>
                    </div>
                    <div class="row" style="margin-top: 50px">
                        <text th:text="${pro.contact.itemName}"></text>
                        <a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',1);'" href=""><img
                                src="../icon/浏览.png" style="width: 20px;height: 20px;"></a>
                        <a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',2);'" href=""><img
                                src="../icon/收藏.png" style="width: 20px;height: 20px;"></a>
                        <a th:onclick="'javascript:sendLog('+${userId}+','+${pro.contact.id}+',3);'" href=""><img
                                src="../icon/购买.png" style="width: 20px;height: 20px;"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<!--日志发送函数-->
<script>
    function sendLog(id, prod, action) {
        var url = "http://localhost:8082/log?id=" + id + "&prod=" + prod + "&action=" + action;
        var request = new XMLHttpRequest();
        request.open("GET", url);
        request.send();
    }
</script>

</body>
</html>